<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core"	  
	  xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets"	  
	  xmlns:c="http://java.sun.com/jsp/jstl/core">

	<h:head>
	
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>acercatuplaza.com</title>
		
		<link href="#{request.contextPath}/css/estilos.css" rel="stylesheet" type="text/css" />		
		<link href="#{request.contextPath}/css/jquery-ui-1.9.1.css" rel="stylesheet" type="text/css" />		
		
		<script src="#{request.contextPath}/js/jquery-1.8.2.js" type="text/javascript" charset="utf-8"></script>
		<script src="#{request.contextPath}/js/jquery-ui-1.9.1.js" type="text/javascript" charset="utf-8"></script>
		
		<link href="#{request.contextPath}/css/infoWindows.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
		<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble-compiled.js"></script>						

		<script type="text/javascript">		
		//<![CDATA[		         
			
			var totalBar = 2;
			var intervalBar;			
			
			function showProgressBar(nombre){	
				if(nombre == 'Darse de Alta' || nombre == 'accion'){
					totalBar = 2; updateBar();
					$("#progressbar").show("fade", 200);											
					$("#principal").hide("fold", 600);	
					intervalBar = setInterval("updateBar()", 100);
				}
			}
			
			function updateBar(){								
				totalBar += 1;							
				$("#progressbar").progressbar({
					 value: totalBar
				});			
			}
			
			function actionTab(i){				
				$("#li_"+i).click();						 												
			}	
			
			function cerrarSesion(){				
				//Mostramos el boton cabecera.
				$('#botonTextoHead2').hide();				
				
				//Cambio de pestañas
				$("#li_1").show();
				$("#li_2").show();
				$("#li_3").show();
				$("#li_4").hide();
				$("#li_5").hide();
				$("#li_6").hide();
			}

			$(document).ready(function() {				
				var selectedTab = $('#selectedTab').val() - 1;
				$("#tabs").tabs({active : selectedTab});												
				$("#progressbar").progressbar({value: totalBar, max: 90});
				$("#li_4").hide();
				$("#li_5").hide();
				$("#li_6").hide();
			});
			
		//]]>
		</script>
	</h:head>

	<h:body>
		<f:view>
			
			<h:panelGroup layout="block" styleClass="header-bar">				
				<img class="logo" src="#{request.contextPath}/img/logo.png" alt="JumperJet" /> 
				<span class="textoCabezera">ACERCATUPLAZA.COM</span>
				<h:outputLabel id="botonTextoHead" for="textoDescripcion" styleClass="botonCabezera">
  					<h:outputText id="textoDescripcion" value="¿Quieres registrarte en la aplicación? " />
  					<a id="botonDarseAlta" class="g-button g-button-red" onclick="actionTab(3)"><h:outputText value="Darse de Alta" /></a>
				</h:outputLabel>	
				<h:form prependId="false">			
					<h:outputLabel id="botonTextoHead2" for="textoDescripcion2" styleClass="botonCabezera" style="display:none">
  						<h:outputText id="textoDescripcion2" value="Cerrar sesión " />
  						<h:commandLink id="botonSalir" class="g-button g-button-red" onclick="cerrarSesion()" value="Salir" action="#{navegationBean.cerrarSesion()}">  								    							                    					                     						 		
                        	<f:ajax execute="@this" render=":contPrincipal" />                        		
  						</h:commandLink>
					</h:outputLabel>
				</h:form>
			</h:panelGroup>
													
			<h:panelGroup id="tabs" layout="block">
			
				<h:form prependId="false">										
					<ul>	
						<c:forEach items="#{listaTabBean.tabs}" var="tab">
                    		<li><a id="li_#{tab.tabId}" href="##{tab.tabCont}" onclick="$('#button_#{tab.tabId}').click()">#{tab.tabLabel}</a></li>
                    		<h:commandButton id="button_#{tab.tabId}" value="TabClick" style="display:none" onclick="showProgressBar('#{tab.tabLabel}')">
                    			<f:actionListener binding="#{navegationBean.setViewedPage(tab.tabFilename)}" />
                    			<f:actionListener binding="#{listaTabBean.setSelectedTab(tab.tabId)}" />
                    			<f:actionListener binding="#{datosPersonalesBean.reiniciar(tab.tabId)}" />				                     						 		   
                        		<f:ajax execute="@this" render=":contPrincipal" />
                    		</h:commandButton>  
                		</c:forEach>						                    	
					</ul>
				</h:form>								
				
				<!-- Un PanelGroup con layout="block" renderizará un <div> como contenedor.
				Si se omite el atributo layout block por defecto renderizará un <span> -->
				<h:panelGroup id="contPrincipal" layout="block">
					<ui:include src="#{navegationBean.viewedPage}" />
					<h:inputHidden id="selectedTab" value="#{listaTabBean.selectedTab}" />
				</h:panelGroup>												
																	
			</h:panelGroup>			
			
			<div id="progressbar" class="progres-bar" />															
										
		</f:view>										
	</h:body>

</html>

